<template>
  <view class="group-charging-progress">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="成团进展"></van-nav-bar>
    <!-- #endif -->
    <view :class="['list', data.gap <= 0 ? 'list-nobnt' : '']" :style="heightScroll">
      <view class="list-header">
        <view class="id">团ID：{{ data.teamNumber }}</view>
        <view class="content">
          <view class="contentl"></view>
          <view class="contentr">
            <view class="contentr-first" v-if="data.status === 1">
              恭喜组团成功，奖励即将发放到账！~
            </view>
            <view class="contentr-first" v-else-if="data.status !== 1 && data.gap <= 0">
              团队目标尚未达成，请继续加油哦~
            </view>
            <view class="contentr-first" v-else-if="data.status !== 1 && data.gap > 0">
              还差
              <text class="text-red">{{ data.gap }}</text>
              人，赶紧去邀请好友参团吧~
            </view>
            <view class="contentr-second">
              <view class="contentr-second-absolute" :style="calcWidth"></view>
            </view>
            <view class="contentr-third">
              目标进展：
              <text class="text-red">{{ data.completeAmount }}</text>
              / {{ data.qualifiedAmount }} {{ data.qualifiedType === 2 ? '度' : '元' }}
            </view>
          </view>
        </view>
        <view class="btm">
          剩余
          <text class="btm-border">{{ data.dayCount }}</text>
          天
          <text class="btm-border">{{ data.hourCount }}</text>
          <text class="text-red">:</text>
          <text class="btm-border">{{ data.minuteCount }}</text>
          <text class="text-red">:</text>
          <text class="btm-border">{{ data.secondCount }}</text>
          结束
        </view>
      </view>
      <view class="list-ul">
        <view class="header">
          <view class="header-left">团员</view>
          <view class="header-right">贡献值</view>
        </view>
        <view class="ul">
          <view class="li" v-for="(item, index) in data.teamList" :key="index">
            <view class="li-account">
              {{ item.userNumber }}
              <view v-if="item.type === 0" class="li-account-absolute"></view>
            </view>
            <view class="li-money">
              {{ item.qualifiedAmount }}{{ item.qualifiedType === 2 ? '度' : '元' }}
              <view v-if="item.status === 3" class="li-money-absolute"></view>
              <view v-if="item.status === 3" class="li-money-absolute2">已退团</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view class="bottom-wrap" v-if="data.gap > 0">
      <!-- #ifdef MP-WEIXIN -->
      <button class="bnt-wrap bnt" open-type="share">邀友参团</button>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <button class="bnt-wrap bnt" @click="toShare">邀友参团</button>
      <!-- #endif -->
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onShareAppMessage, onLoad } from '@dcloudio/uni-app';
import { getTeamById } from '@/service/apis/market';
import dayjs from 'dayjs';
import { systemInfo, getwv, setToastInstance } from '@/mixins/info';
// #ifdef H5
import nativeApi from '@/mixins/nativeApi';
// #endif
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

const originId = import.meta.env.VITE_VUE_APP_ORIGIN_ID;
const imgUrl = import.meta.env.VITE_VUE_APP_RES;
const miniEnv = import.meta.env.VITE_VUE_APP_MINI_ENV;

const data = reactive({
  teamNumber: '',
  activityId: '',
  teamId: '',
  status: 0, // 组团状态0:进行中 1:成功 2:失败
  pic: '',
  reason: '',
  teamList: [] as any[],
  completeAmount: '' as number | string,
  qualifiedAmount: '' as number | string,
  gap: 0,
  dayCount: '00',
  hourCount: '00',
  minuteCount: '00',
  secondCount: '00',
  endTime: '',
  timer: null as any,
  qualifiedType: 0,
});

const heightScroll = computed(() => {
  if (data.gap <= 0) {
    // #ifdef H5
    return `height:${systemInfo.screenHeight - systemInfo.navHeight - systemInfo.safeBottom}px`;
    // #endif
    return `height:${systemInfo.screenHeight - systemInfo.safeBottom}px`;
  }
  // #ifdef H5
  return `height:${
    systemInfo.screenHeight - systemInfo.navHeight - systemInfo.safeBottom - getwv(62)
  }px`;
  // #endif
  return `height:${systemInfo.screenHeight - systemInfo.safeBottom - getwv(62)}px`;
});
// #ifdef MP-WEIXIN
onShareAppMessage(function (e): any {
  if (data.gap > 0) {
    return {
      title: '',
      path: `/pagesMain/groupCharging/groupCharging?id=${data.activityId}&teamId=${data.teamId}`,
    };
  }
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});
// #endif

// #ifdef H5
const toShare = () => {
  let sharePath = 'pages/stationMap/stationMap';
  if (data.gap > 0) {
    sharePath = `pagesMain/groupCharging/groupCharging?id=${data.activityId}&teamId=${data.teamId}`;
  }

  nativeApi.shareMiniProgram({
    appletId: originId,
    url: 'https://www.baidu.com',
    path: sharePath,
    thumbUrl: `${imgUrl}share-img.png`,
    env: miniEnv, // develop  preview  publish
    title: '',
    content: '',
  });
};
// #endif

const getTeamDetail = () => {
  getTeamById(data.teamId).then((res: any) => {
    data.activityId = res.activityId;
    data.teamNumber = res.teamNumber;
    data.status = res.status;
    data.pic = res.pic;
    data.reason = res.reason;
    data.completeAmount = res.completeAmount;
    data.qualifiedAmount = res.qualifiedAmount;
    data.teamList = res.details || [];
    data.gap = res.participatingCount - res.joinCount;
    data.qualifiedType = res.qualifiedType;
    data.endTime = res.endTime.split(' ')[0].concat(' 23:59:59');
    clearInterval(data.timer);
    data.timer = null;
    if (data.status !== 1) {
      timerFormat();
    }
  });
};

// 倒计时
const timerFormat = () => {
  const endTime = dayjs(data.endTime);
  data.timer = setInterval(() => {
    const secondCount = endTime.diff(dayjs(), 'second');
    data.dayCount = String(Math.floor(secondCount / 60 / 60 / 24)).padStart(2, '0');
    data.hourCount = String(Math.floor((secondCount / 60 / 60) % 24)).padStart(2, '0');
    data.minuteCount = String(Math.floor((secondCount / 60) % 60)).padStart(2, '0');
    data.secondCount = String(Math.floor(secondCount % 60)).padStart(2, '0');
  }, 1000);
};

const calcWidth = computed(() => {
  if (data.qualifiedAmount) {
    let percentage = (Number(data.completeAmount) / Number(data.qualifiedAmount)) * 100;
    if (percentage > 100) {
      percentage = 100;
    } else if (percentage < 0) {
      percentage = 0;
    }
    return `width:${percentage}%`;
  }
  return '';
});

onLoad((option: any) => {
  data.teamId = option.id;
  getTeamDetail();
});

onUnload(() => {
  clearInterval(data.timer);
  data.timer = null;
});
// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss" scoped>
.group-charging-progress {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  box-sizing: border-box;
  bottom: constant(safe-area-inset-bottom);
  bottom: env(safe-area-inset-bottom);
  background-color: #f2f2f2;

  .text-red {
    color: #fa3939;
  }

  .list {
    position: relative;
    height: calc(100% - 62px - constant(safe-area-inset-bottom));
    height: calc(100% - 62px - env(safe-area-inset-bottom));
    overflow-y: scroll;
    background-color: #f2f2f2;

    &-header {
      margin: 14px 12px 12px;
      box-sizing: border-box;
      width: 351px;
      height: 208px;
      border-radius: 10px;
      background: #fff;

      .id {
        color: #5073f7;
        font-size: 15px;
        font-weight: 600;
        padding: 11px 0 0 16px;
      }

      .content {
        display: flex;
        align-items: center;

        .contentl {
          width: 119px;
          height: 123px;
          background-image: url($url + 'group/coupon.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .contentr {
          display: flex;
          flex-direction: column;
          justify-content: stretch;
          align-items: baseline;
          position: relative;
          left: -4px;

          &-first {
            color: #858585;
            font-size: 14px;
            font-weight: 500;
          }

          &-second {
            width: 217px;
            height: 14px;
            box-sizing: border-box;
            border-radius: 7px;
            background-color: #d9d9d9;
            position: relative;
            margin: 17px 0;

            &-absolute {
              border-radius: 7px;
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              background: linear-gradient(to right, #ff9900, #ffdc62);
              /* 标准的语法（必须放在最后） */
            }
          }

          &-third {
            color: #858585;
            font-size: 14px;
            font-weight: 500;
          }
        }
      }

      .btm {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #858585;
        font-size: 15px;
        border-top: 1px solid #f2f2f2;
        margin: 0 6px;
        padding-top: 16px;

        &-border {
          color: #fa3939;
          font-size: 15px;
          font-weight: 500;
          width: 18px;
          line-height: 21px;
          height: 21px;
          border-radius: 4px;
          background: #fff5f5;
          margin: 0 8px;
        }
      }
    }

    &-ul {
      margin-left: 12px;
      border-radius: 8px;
      background-color: #ffffff;
      width: 351px;

      .header {
        display: flex;
        align-items: center;
        height: 42px;
        color: #242424;
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0.12px;

        &-left {
          padding: 0 177px 0 76px;
        }
      }

      .ul {
        box-sizing: border-box;
        padding: 0 12px;
        margin-bottom: 12px;

        .li {
          height: 54px;
          box-sizing: border-box;
          border-top: 1px solid #e5e8f6;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #545454;
          font-size: 12px;
          font-weight: 500;
          line-height: 22px;
          padding: 0 7px;

          &:first-child {
            border-top: none;
          }

          &-account {
            position: relative;
            padding-left: 43px;

            &::before {
              content: '';
              position: absolute;
              top: -9px;
              left: 0;
              width: 36px;
              height: 36px;
              background-image: url($url + 'group/default-head.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
            }

            &-absolute {
              position: absolute;
              top: -22px;
              left: 7px;
              width: 23px;
              height: 21px;
              background-image: url($url + 'group/crown.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
            }
          }

          &-money {
            position: relative;

            &-absolute {
              position: absolute;
              right: -19px;
              top: -16px;
              width: 37px;
              height: 37px;
              background-image: url($url + 'group/returned-team.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
            }

            &-absolute2 {
              position: absolute;
              right: -20px;
              top: -13px;
              transform: rotate(45deg);
              color: #fff;
              font-size: 10px;
              font-weight: 600;
            }
          }
        }
      }
    }
  }

  .list-nobnt {
    height: 100%;
  }

  .bottom-wrap {
    position: absolute;
    display: flex;
    justify-content: space-between;
    bottom: 0;
    width: 100vw;
    height: calc(62px + constant(safe-area-inset-bottom));
    height: calc(62px + env(safe-area-inset-bottom));
    padding: 0 16px;
    box-sizing: border-box;
    background-color: #ffffff;
    bottom: 0;
    border-top: 1px solid #e6e6e6;

    .bnt {
      width: 100%;
      height: 40px;
      margin-top: 12px;
      border-radius: 50px;
      font-size: 16px;
    }
  }
}
</style>